<template>
  <div class="view-container">

    <!--<el-alert class="view－alert"
              :title="alertText"
              type="warning"
              show-icon>
    </el-alert>-->

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <span slot="label">
          {{tab.label}}
          <el-badge class="mark" :value="tab.num" :max="99" :hidden="tab.num<=0" />
        </span>
      </el-tab-pane>
    </el-tabs>

    <div class="">
      <keep-alive>
        <component :is="activeName">
        </component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import {AS_TAB_KEY, getTabName, setTabName} from '@/utils/tabUtil';
  import returnPending from './return_pending.vue';
  import returning from './return_ing.vue';
  import returnMoney from './return_money.vue';
  import returnComplete from './return_complete.vue';


  export default {
    name: 'afterServiceReturn', //售后退货
    components:{
      'return-pending':returnPending,
      'return-ing':returning,
      'return-money':returnMoney,
      'return-complete':returnComplete,
    },
    data ()
    {
      return {
        activeName:'return-pending', //当前激活的标签,以及视图
        tabs:[
          {label: '待退货', name: 'return-pending', num:0},
          {label: '退货中', name: 'return-ing', num:0},
          {label: '退款中', name: 'return-money', num:0},
          {label: '退货完成', name: 'return-complete', num:0},
        ],
      }
    },
    computed:{
      alertText()
      {
        return '';
      }
    },
    mounted(){
      let activetab = getTabName(AS_TAB_KEY);
      if(this.tabs.some((tab)=>{return activetab === tab.name}))
      {
        this.activeName = activetab;
      }
    },
    methods: {
      handleClick(tab,event)
      {
        setTabName(AS_TAB_KEY,tab.name);
      }
    }
  }
</script>
